<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
const list = ref([]);
const listType = ref({ id: 1 });
const inpArr = ref([]);
const inp = ref([]);
const left = ref({
  left: 10 + 70 * 0 + "px",
});
const inpVal = ref("");

const getSearchList = async () => {
  let { data } = await axios.get("http://localhost:3000/searchList");
  // console.log(data);
  list.value = data;
  return data;
};
onMounted(async () => {
  const data = await getSearchList();
  active(data[0].id);
});

function active(id) {
  // console.log(id)
  listType.value = list.value.find((item) => item.id == id);
  left.value.left = 10 + 70 * (id - 1) + "px";
  // console.log(left.value)
  inpArr.value = listType.value.type;
  // console.log(inpArr.value);
  inp.value = inpArr.value[0];
}
function inpActive(id) {
  // console.log(id)
  // console.log(listType.value)
  inp.value = inpArr.value.find((item) => item.id == id);
  // console.log(inp.value);
}

function searchFn(val) {
  // console.log(val)
  // console.log(inpVal.value)
  if (inpVal.value != "" || inpVal.value.length > 0) {
    window.open(`${val}${inpVal.value}`, "_blank");
  } else {
    ElMessage.warning("请输入你需要搜索的内容");
  }
}
</script>

<template>
  <div class="search">
    <ul class="searchUl">
      <li
        v-for="item in list"
        :key="item.id"
        class="searchLi"
        :class="listType.id == item.id ? 'active' : ''"
        :data-id="item.id"
        @click="active(item.id)"
        :style="item.id == 'zn1' ? style : ''"
      >
        <div>{{ item.name }}</div>
        <div class="line"></div>
      </li>
      <div class="bottomLine" :style="left"></div>
    </ul>
    <div class="inp">
      <input
        type="text"
        :placeholder="inp.note"
        v-model="inpVal"
        @keyup.enter="searchFn(inp.url)"
      />
      <i class="iconfont icon-sousuo" @click="searchFn(inp.url)"></i>
    </div>
    <ul class="inpUl">
      <li
        v-for="item in listType?.type ? listType.type : 1"
        :key="item.id"
        @click="inpActive(item.id)"
        :class="inp.id == item.id ? 'active' : ''"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/comStyle/search/search.scss");
</style>
